<template>
	<div class="company-body">
		<div class="van-nav-bar__placeholder">
			<div class="nav-bar-tabs">
				<div class="van-nav-bar__content">
					<div class="van-nav-bar__left" @click="goBack"><van-icon name="arrow-left" class="van-nav-bar__arrow" /></div>
					<div class="nav-header">
						<!-- <span>同类职位推荐</span> -->
						<div class="nav-item" :class="[tabCurrent == 0 ? 'active' : '']" @click="tabChange(0)">公司介绍</div>
						<div class="nav-item" :class="[tabCurrent == 1 ? 'active' : '']" @click="tabChange(1)">在招职位</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 公司信息 -->
		<div class="company-wrapper" v-show="tabCurrent == 0">
			<div class="info-card" v-if="companyInfo">
				<h2 class="title">{{companyInfo.enName}}</h2>
				<div class="info-wrapper">
					<div class="info-item" v-if="companyInfo.enNature">
						<img src="../../assets/building.png" class="building" />
						<span>{{companyInfo.enNature}}</span>
					</div>
					<div class="info-item" v-if="companyInfo.enPersonnel">
						<img src="../../assets/people.png" class="people" />
						<span>{{companyInfo.enPersonnel}}</span>
					</div>
					<div class="info-item" v-if="companyInfo.enTrade_dictText">
						<img src="../../assets/gongzuojingyan.png" class="type" />
						<span>{{companyInfo.enTrade_dictText}}</span>
					</div>
				</div>
				<div class="mark-wrapper">
					<div class="marker-item" v-if="companyInfo.workStart">{{companyInfo.workStart}} - {{companyInfo.workEnd}}</div>
					<div class="marker-item" v-if="companyInfo.rest">{{companyInfo.rest}}</div>
					<div class="marker-item" v-if="companyInfo.workOvertime">{{companyInfo.workOvertime}}</div>
					<div class="marker-item" v-for="(item,index) in companyInfo.otherWelfare">{{item}}</div>
				</div>
				<div class="position-wrapper" v-if="companyInfo.enLocation">
					<div class="position">
						<img src="../../assets/position.png" class="ico" />
						<!-- <span>{{companyInfo.enAddress_dictText.replace(/,/g,'')+companyInfo.enLocation}}</span> -->
						<span>{{companyInfo.enLocation}}</span>
					</div>
					<div class="navigation">
						<img src="../../assets/navigation.png" class="ico" />
						<!-- <span>导航</span> -->
						<a :href="'https://uri.amap.com/marker?position='+companyInfo.lng+','+companyInfo.lat+'&name='+companyInfo.enName">导航</a>
					</div>
				</div>
			</div>
			<div class="card" v-if="companyInfo&&companyInfo.introduce">
				<div class="title">公司简介</div>
				<div class="content">
					{{isOpen?companyInfo.introduce:companyInfo.introduce.substr(0,100)+'...'}}<span class="view" @click="toggleCon">{{isOpen?'折叠':'查看'}}</span>
				</div>
			</div>
			<div class="card" v-if="companyInfo&&companyInfo.enPic_dictText.length">
				<div class="title">公司环境</div>
				<div class="slider">
					<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
						<van-swipe-item v-for="(item,index) in companyInfo.enPic_dictText"><van-image :src="item" class="slider-item" /></van-swipe-item>
					</van-swipe>
				</div>
			</div>
		</div>
		<!-- 公司职位信息 -->
		<div class="company-wrapper list" v-show="tabCurrent == 1">
			<div class="van-nav-tabs__placeholder">
				<div class="van-nav-tabs">
					<van-dropdown-menu>
						<van-dropdown-item v-model="areaValue" ref="areaDrop" :title="areaTitle" :options="area" @change="(e)=>{filterChange(e,'area')}" @click="filterClick" @closed="filterAction" @close="closeFilter"/>
						<van-dropdown-item v-model="experienceValue" :title="experienceTitle" :options="experience" @change="(e)=>{filterChange(e,'experience')}" @closed="filterAction" @close="closeFilter"/>
						<van-dropdown-item v-model="salaryValue" :title="salaryTitle" :options="salary" @change="(e)=>{filterChange(e,'salary')}" @closed="filterAction" @close="closeFilter"/>
					</van-dropdown-menu>
				</div>
			</div>
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
					<div class="card" v-for="(item,index) in list" :key="item.id||index" @click="detail(item.id)">
						<div class="top">
							<h2 class="title">{{ item.title||item.opJob.jobName }}</h2>
							<span class="salary" v-if="item.opJob">{{ item.opJob.minMoney | salaryFilter(item.opJob.maxMoney) }}</span>
							<span class="salary" v-else>{{item.minMoney | salaryFilter(item.maxMoney)}}</span>
						</div>
						<p class="types">
							{{ item.jobCity_dictText||item.opJob.jobArea }}
							<span class="divider"></span>
							{{ item.eduLevel_dictText || edulevelFilter(item.opJob)}}
							<span class="divider"></span>
							{{ item.opJob?experienceFilter(item.opJob):experienceFilter(item)}}
							<span class="divider"></span>
							{{ item.needCount||item.opJob.needCount}}人
						</p>
						<p class="compony" v-if="item.companyName">{{item.companyName}}</p>
					</div> 
				</van-list>
			</van-pull-refresh>
		</div>
	</div>
</template>

<script>
import { Swipe, SwipeItem, Image, DropdownMenu, DropdownItem,List,PullRefresh,Divider } from 'vant';
import {baseSo,myList,companyInfo,baseBlock,baseData} from '@/api/api';
export default {
	components: {
		vanSwipe: Swipe,
		vanSwipeItem: SwipeItem,
		VanImage: Image,
		vanDropdownMenu: DropdownMenu,
		vanDropdownItem: DropdownItem,
		vanList: List, 
		vanPullRefresh: PullRefresh, 
		divider: Divider
	},
	filters: {
		salaryFilter(a, b) {
			if (a >= 1000) {
				return a / 1000 + 'K' + '-' + b / 1000 + 'K';
			} else {
				return a + '-' + b;
			}
		}
	},
	data() {
		return {
			tabCurrent: 0,
			areaTitle: '城市',
			experienceTitle: '经验',
			salaryTitle: '薪资',
			areaValue:'',
			experienceValue:'',
			salaryValue:'',
			area: [{ text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 }],
			experience: [{ text: '默认排序', value: 'a' }, { text: '好评排序', value: 'b' }, { text: '销量排序', value: 'c' }],
			salary:[{ text: '全部商品', value: 0 }],
			allAreaData:[],//城市数据
			areaDataLevels:{
				province:[],
				city:[],
				district:[]
			},
			list: [],
			loading: false,
			finished: false,
			refreshing: false,
			listQuery:{
				pageNo: 1, pageSize: 10
			},
			companyInfo:null,
			prams:{
				type: "job",
				"companyId.term":"",
			},
			id:"",
			isOpen:false,//公司详情是否展开，默认不展开
		};
	},
	watch:{
		area(e){
			this.$refs.areaDrop.keepOpen = true
			if(e[0].level=="city"){
				this.area.unshift({
					text: '返回', value: -1
				},{
					text: '全省', value: this.areaValue
				})
				this.areaDataLevels.city = e
			}else if(e[0].level=="district"){
				this.area.unshift({
					text: '返回', value: -2
				},{
					text: '全市', value: this.areaValue
				})
				this.areaDataLevels.district = e
				this.$refs.areaDrop.keepOpen = false
			}
		}
	},
	methods: {
		toggleCon(){
			this.isOpen = !this.isOpen
		},
		goBack(){
			this.$router.go(-1)
		},
		tabChange(index) {
			this.tabCurrent = index;
		},
		experienceFilter(e) {
			const experience = e.minExperience + ',' + e.maxExperience;
			const res = this.$store.state.experience.find(item => item.value === experience);
			return res.label;
		},
		edulevelFilter(e) {
			const level = e.eduLevel + '';
			const res = this.$store.state.eduLevels.find(item => item.value === level);
			return res.label;
		},
		onLoad() {
			baseSo(Object.assign(this.prams,this.listQuery)).then(response => {
				if(response.result.current==1) this.list = response.result.records;
				else this.list = this.list.concat(response.result.records);
				if(response.result.current>=response.result.pages){
					this.finished = true;
				}else{
					this.listQuery.pageNo++
				}
			}).finally(()=>{
				this.loading = false;
				this.refreshing = false;
			})
		},
		onRefresh() {
			// 清空列表数据
			this.finished = false;
			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.loading = true;
			this.listQuery.pageNo=1
			this.onLoad();
		},
		detail(id){
			this.$router.push({path:'/jobDetails',query:{id}})
		},
		getCompanyInfo(){
			companyInfo({id:this.id}).then(response=>{
				const {result} = response
				result.otherWelfare = (result.otherWelfare?result.otherWelfare.split(","):[])
				result.enPic_dictText = (result.enPic_dictText?result.enPic_dictText.split(","):[])
				this.companyInfo = result
				// console.log(result.otherWelfare)
			})
		},
		getBlockData(){
			baseBlock({code:'search'}).then(res=>{
				let data = res.result.children
				let area = data.find(item=>item.name=='工作地点')
				area = area.blockData
				let experience = data.find(item=>item.name=='工作经验')
				experience = experience.blockData
				let salary = data.find(item=>item.name=='薪资范围')
				salary = salary.blockData
				this.area = this.formatData(area,true,true);
				this.area.unshift({text: '全部', value: 0});
				this.areaDataLevels.province = this.area
				this.experience = this.formatData(experience,true);
				this.experience.unshift({text: '全部', value: 0})
				this.salary = this.formatData(salary,true);
				this.salary.unshift({text: '全部', value: 0})
			})
		},
		getBaseData(){
			baseData({clz: 'area'}).then(res=>{
				this.allAreaData = res.result
			})
		},
		// 筛选条件点击 地区
		filterClick(e){
			console.log("----------")
			//点的是第三层的全市
			let current = this.area.find(item=>item.value==e)
			console.log(current)
			if(current.text=="全市"||current.text=="全省"||current.text=="全部"||(current.level&&current.level=='district')){
				console.log("----------")
				this.$refs.areaDrop.showPopup=false
				return 
			}
		},
		//筛选条件发生变化
		filterChange(e,type){
			console.log(e)
			this[type+'Value'] = e;
			if(type=="area"){
				//选择的是地区
				let data = e>0?this.getNowAreaData(this.areaValue,this.allAreaData):null
				if(data){
					this.area = this.formatData(data);
				}
				if(!data&&e>0){
					this.$refs.areaDrop.showPopup=false
				}
				if(e==-1){
					//显示省的数据
					this.area = this.areaDataLevels.province
				}else if(e==-2){
					//显示市的数据
					this.area = this.areaDataLevels.city
				}
			}
		},
		filterAction(){
			console.log(this.areaValue,this.experienceValue,this.salaryValue)
			let prams = this.prams;
			try{
				delete prams['jobCounty.term'];
				delete prams['jobProvince.term'];
				delete prams['jobCity.term'];
				delete prams['experience.range']
				delete prams['money.range']
			}catch(e){
				//TODO handle the exception
			}
			if(this.areaValue){
				let current = this.area.find(item=>item.value==this.areaValue)
				const {level,text} = current
				if(level=='district') prams['jobCounty.term'] = this.areaValue
				if(text=="全省") prams['jobProvince.term'] = this.areaValue
				if(text=="全市") prams['jobCity.term'] = this.areaValue
			}
			if(this.experienceValue){
				prams['experience.range'] = this.experienceValue
			}
			if(this.salaryValue){
				prams['money.range'] = this.salaryValue
			}
			
			this.onRefresh()
		},
		closeFilter(e){
			// jobCounty.term: 120103
			if(this.area.length==3&&this.area[1].text=="全省"){
				// 解决直辖市的bug
				this.$refs.areaDrop.toggle(true)
			}
		},
		getNowAreaData(e,arr){
			let that = this,res;
			for(var i = 0;i<arr.length;i++){
				if(arr[i].value==e) {
					res = arr[i].children;
					return res
				}else if(arr[i].children){
					const loopres = that.getNowAreaData(e,arr[i].children)
					if (loopres) {
						return loopres
					}
				}
			}
		},
		formatData(arr,isFirstLevel=false,isProvince=false){
			let resArr = []
			arr.forEach(item=>{
				let obj = isFirstLevel?{text:item.title,value:item.sourceId}:{text:item.label,value:item.value,level:item.level};
				isProvince?Object.assign(obj,{level:'province'}):null
				resArr.push(obj)
			})
			return resArr
		}
	},
	created() {
		this.id = this.$route.query && this.$route.query.id;
		this.prams['companyId.term'] = this.id
		this.onLoad();
		this.getCompanyInfo()
		this.getBlockData()
		this.getBaseData()
	},
};
</script>

<style lang="scss" scoped>
@import '../../styles/mixin.scss';
.company-body {
	min-height: 100vh;
	.company-wrapper {
		padding-top: 16px;
		padding-bottom: 40px;
		&.list{
			padding-top: 0;
			margin-top: -16px;
			.card {
				padding: 30px;
				background: #fff;
				border-radius: 15px;
				margin: 16px 30px 0px 30px;
				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.title {
						font-size: 32px;
						font-weight: 600;
						flex:1 1 auto;
						display: block;
						@include text-ellipsis
					}
					.salary {
						font-size: 30px;
						color: #fe3d09;
						flex:0 0 auto;
						margin-left: 20px;
					}
				}
				.types{
					display: flex;
					font-size: 24px;
					align-items: center;
					margin-top: 25px;
					.divider{
						display: block;
						width: 1px;
						height: 24px;
						margin: 0 15px;
						background: #E2E2E2;
					}
				}
				.compony{
					margin-top: 25px;
					font-size: 24px;
					color: #999;
				}
			}
		}
		.info-card {
			padding: 30px;
			border-radius: 15px;
			background: #fff;
			margin: 0 30px 16px 30px;
			.title {
				font-size: 36px;
				font-weight: 600;
				color: #000000;
				line-height: 33px;
				margin: 20px 0;
			}
			.info-wrapper {
				font-size: 24px;
				color: #333;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: -10px;
				.info-item {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					line-height: 34px;
					margin-right: 30px;
					margin-bottom: 10px;
					.building {
						width: 20px;
						height: 24px;
						margin-right: 10px;
					}
					.people {
						width: 24px;
						height: 21px;
						margin-right: 10px;
					}
					.type {
						width: 27px;
						height: 24px;
						margin-right: 10px;
					}
				}
			}
			.mark-wrapper {
				display: flex;
				flex-wrap: wrap;
				margin-top: 15px;
				.marker-item {
					background: #f8f8fa;
					border-radius: 4px;
					height: 52px;
					padding: 0 17px;
					font-size: 24px;
					color: #656565;
					line-height: 52px;
					margin-right: 16px;
					margin-top: 15px;
				}
			}
			.position-wrapper {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 30px;
				border-top: 1px solid #eeeeee;
				margin-top: 30px;
				.position {
					font-size: 24px;
					color: #333;
					display: flex;
					align-items: center;
					flex: 1 1 auto;
					margin-right: 20px;
					.ico {
						width: 21px;
						height: 26px;
						margin-right: 10px;
					}
				}
				.navigation {
					font-size: 24px;
					color: #e54437;
					display: flex;
					align-items: center;
					flex: 0 0 auto;
					.ico {
						width: 29px;
						height: 29px;
						margin-right: 10px;
					}
				}
			}
		}
		.card {
			margin: 0 30px 16px 30px;
			border-radius: 15px;
			background: #fff;
			padding-top: 20px;
			&:last-of-type {
				margin-bottom: 0;
			}
			.title {
				padding: 20px 30px;
				font-size: 30px;
				font-weight: 500;
				color: #000000;
				line-height: 33px;
				position: relative;
				&::before {
					content: '';
					display: block;
					position: absolute;
					left: 0;
					width: 4px;
					height: 27px;
					background: #e54437;
				}
			}
			.content {
				padding: 30px;
				padding-top: 0;
				font-size: 24px;
				font-weight: 400;
				color: #333333;
				line-height: 48px;
				.view{
					color: #e54437;
				}
			}
			.slider {
				padding: 30px;
				padding-top: 10px;
				.my-swipe .van-swipe-item {
					.slider-item,
					.slider-item img {
						width: 100%;
					}
				}
				::v-deep.van-swipe__indicators {
					bottom: 15px;
					.van-swipe__indicator {
						background: #bbbbbb;
					}
					.van-swipe__indicator--active {
						background: #e54437 !important;
					}
				}
			}
		}
	}
}
.van-nav-tabs__placeholder {
	height: 40px;
	.van-nav-tabs {
		position: fixed;
		top: 46px;
		left: 0;
		width: 100%;
		z-index: 99;
		::v-deep .van-dropdown-menu{
			width: 100%;
			.van-dropdown-menu__bar{
				background: #F6F6F8;
				box-shadow: none;
				height: 40px;
				.van-dropdown-menu__title{
					font-size: 13px;
				}
			}
			.van-dropdown-menu__title--active,.van-dropdown-item__option--active{
				color: #e54437;
			}
		}
	}
}
.van-nav-bar__placeholder {
	height: 46px;
	.nav-bar-tabs {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		line-height: 22px;
		text-align: center;
		background-color: #fff;
		.van-nav-bar__content {
			position: relative;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			height: 46px;
			.van-nav-bar__left,
			.van-nav-bar__right {
				position: absolute;
				top: 0;
				bottom: 0;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				padding: 0 16px;
				font-size: 14px;
				cursor: pointer;
				.van-nav-bar__arrow {
					margin-right: 4px;
					font-size: 16px;
					color: #333;
					font-weight: bold;
				}
			}
			.nav-header {
				max-width: 60%;
				margin: 0 auto;
				color: #323233;
				font-weight: 500;
				font-size: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				.nav-item {
					margin-left: 65px;
					position: relative;
					height: 46px;
					display: flex;
					align-items: center;
					transition: all ease-in 0.3s;
					&.active {
						color: #e54437;
						&:after {
							position: absolute;
							content: '';
							width: 100%;
							height: 2px;
							left: 0;
							background: #e54437;
							bottom: 0;
						}
					}
					&:first-of-type {
						margin-left: 0;
					}
				}
			}
		}
	}
}
</style>
